<template>
  <div class="content" v-if="isVisible">
    <div class="mini_game_wrapper">
      <div class="mini_game_circle" ref="circleRef">
        <div v-for="(item, index) in props.items" :key="index" class="mini_game_item" :style="getItemStyle(index)"
          @click="handleClick(item)" :class="{ animated: isAnimated }">
          <ImgT :key="item.game_icon" :src="joinURL(settings.backend_upload, item.game_icon)" alt="" class="game_icon" />
          <span class="game_label">{{ gameClubIds[item.game_type] }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, onMounted, nextTick } from "vue";
import { storeToRefs } from "pinia";
import { Page } from "@/store/page";
import pinia from "@/store";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
import { joinURL } from '@/utils/publicMethods'

const { settings } = storeToRefs(Page(pinia));

// 定义事件和属性
const emit = defineEmits(["game-click"]);
const props: any = defineProps({
  items: {
    type: Array,
    required: true,
    default: () => [],
  },
  isVisible: {
    type: Boolean,
    required: true,
    default: false,
  },
});

// 游戏类型映射
const gameClubIds: any = ref({
  49: t('club_page_49'),
  47: t('club_page_47'),
});

// 动画状态
const isAnimated = ref(false);
const radius = ref(120); // 圆的半径，初始值
const circleRef = ref<HTMLDivElement | null>(null); // 引用圆的容器

// 动态获取盒子的大小
const updateRadius = () => {
  if (circleRef.value) {
    const rect = circleRef.value.getBoundingClientRect();
    radius.value = Math.min(rect.width, rect.height) / 2 - 40; // 取宽高的最小值一半，并减去间距
  }
};

// 计算每个游戏项的位置样式
const getItemStyle = (index: number) => {
  const totalItems = props.items.length;
  const angle = (360 / totalItems) * index - 90;

  console.log('radius.value', radius.value)
  const x = (radius.value) * Math.cos((angle * Math.PI) / 180); // x 坐标
  const y = (radius.value) * Math.sin((angle * Math.PI) / 180); // y 坐标

  console.log(`Game ${index}: angle=${angle}, x=${x}, y=${y}`);

  return {
    transform: isAnimated.value
      ? `translate(${x}px, ${y}px) scale(1)` // 动画展开后的位置
      : `translate(0, 0) scale(0.5)`, // 初始集中在中心
    opacity: isAnimated.value ? 1 : 0,
    transition: `transform 0.8s ease ${(index + 1) * 0.1}s, opacity 0.8s ease ${(index + 1) * 0.1}s`,
  };
};



// 处理游戏项点击事件
const handleClick = (item: any) => {
  emit("game-click", item);
};

// 监听弹窗打开状态并触发动画
watch(
  () => props.isVisible,
  async (newVal) => {
    if (newVal) {
      await nextTick(); // 确保 DOM 渲染完成
      setTimeout(() => {
        // 当窗口大小变化时更新圆的半径
        window.addEventListener("resize", updateRadius);
        updateRadius()
        isAnimated.value = true; // 播放动画
      }, 100);
    } else {
      isAnimated.value = false; // 重置动画状态
    }
  }
);
onMounted(async () => {

  // // nextTick(() => {
  // //   updateRadius(); // 初始时计算半径
  // // });
  // await updateRadius();
});
</script>

<style scoped lang="scss">
.content {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  .mini_game_wrapper {
    position: relative;
    width: 316px;
    height: 316px;
    margin: auto;

    .mini_game_circle {
      position: relative;
      width: 316px;
      height: 316px;
      border-radius: 50%;
      border: 1px solid rgba(118, 155, 255, 0.35);
      background: linear-gradient(180deg, rgba(43, 135, 255, 0.21) 0%, rgba(28, 47, 112, 0.21) 100%);
      box-shadow: 9px 9px 24.6px 0px rgba(78, 122, 255, 0.48) inset;
      background: url(/imgs/club/mini_bg.png) no-repeat;
      background-size: 70px 70px;
      background-position: center;
      overflow: hidden; // 确保动画不会溢出

      .mini_game_item {
        position: absolute;
        top: 43%;
        /* 确保居中 */
        left: 43%;
        /* 确保居中 */
        transform-origin: center;
        opacity: 0;
        /* 初始不可见 */
        transform: scale(0.5) translate(0, 0);
        /* 初始集中在圆心 */
        transition: transform 0.8s ease, opacity 0.8s ease;

        &.animated {
          opacity: 1;
          /* 动画后显示 */
          transform: scale(1) translate(-50%, -50%);
          /* 正常大小 */

        }

        .game_icon {
          width: 40px;
          height: 40px;
          display: block;
        }

        .game_label {
          color: white;
          font-size: 12px;
          margin-top: 5px;
        }
      }
    }
  }
}
</style>
